import React from 'react';
import { config } from 'utils';
import { connect } from 'dva';
import { InputItem, WhiteSpace, WingBlank, Button } from 'antd-mobile';
import { createForm } from 'rc-form';
import styles from './style.less';

@createForm()
@connect(({ login, app = {} }) => ({ login, loading: app.loading }))
class Login extends React.PureComponent {
  state = {
    pwdHide: true,
    errArr: [],
  };

  // 清楚报错
  clearErr = () => {
    this.setState({
      errArr: [],
    });
  };

  // 提交
  onSubmit = () => {
    const { dispatch, form } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        const errArr = Object.keys(err);
        this.setState({ errArr });
        return;
      }
      dispatch({
        type: 'login/verifyUser',
        payload: values,
      });
    });
  };

  /** 显示密码 */
  showPwd = () => {
    this.setState({
      pwdHide: false,
    });
  };

  /** 隐藏密码 */
  hidePwd = () => {
    this.setState({
      pwdHide: true,
    });
  };

  render() {
    const { pwdHide, errArr } = this.state;
    const { form, loading } = this.props;
    const { getFieldProps } = form;
    return (
      <div className={styles.page}>
        <div className={styles.header}>
          <img src={config.logo2} alt="logo" />
        </div>
        <div className={styles.body}>
          <WingBlank>
            <InputItem
              size="large"
              {...getFieldProps('UserName', {
                // initialValue: '',
                rules: [{ required: true, message: '用户名不能为空!' }],
              })}
              labelNumber={2}
              clear
              placeholder="用户名"
              maxLength={30}
              error={errArr.includes('UserName')}
              onTouchEnd={errArr.includes('UserName') ? this.clearErr : void 0}
            >
              <div className={styles['user-name-icon']} />
            </InputItem>
            <WhiteSpace size="xl" />
            <InputItem
              {...getFieldProps('UserPwd', {
                rules: [{ required: true, message: '密码不能为空!' }],
              })}
              labelNumber={2}
              type={pwdHide ? 'password' : 'text'}
              placeholder="密码"
              maxLength={30}
              error={errArr.includes('UserPwd')}
              onTouchEnd={errArr.includes('UserPwd') ? this.clearErr : void 0}
              extra={
                <div
                  onTouchStart={this.showPwd}
                  onTouchEnd={this.hidePwd}
                  className={pwdHide ? styles['eye-close-icon'] : styles['eye-open-icon']}
                />
              }
            >
              <div className={styles['user-pwd-icon']} />
            </InputItem>
            <WhiteSpace size="xl" />
            <div className={styles.submit}>
              <WingBlank size="xl">
                <Button type="primary" loading={loading} disabled={loading} onClick={this.onSubmit}>
                  登陆
                </Button>
              </WingBlank>
            </div>
          </WingBlank>
        </div>
        <div className={styles.footer}>{config.footerText}</div>
      </div>
    );
  }
}

export default Login;
